<template>
  <div class="login">
    <div class="icon">
      <i class="cc- cc-fanhui" @click="$router.back()"></i>
    </div>
    <div class="title">
      <h5>daniella Mall</h5>
    </div>
    <div class="loginMethod">
      <span @click="isActive = true" :class="{ onAcitve: isActive }" 
        >短信登录</span
      >
      <span @click="isActive = !isActive" :class="{ onAcitve: !isActive }"
        >密码登录</span
      >
    </div>
    <div class="inputFrom">
      <div class="default" v-if="isActive">
        <div>
          <input type="text" placeholder="获取验证码"  v-model="phoneCode"/>
          <button @click="sendCode" :class="{btnOn:!codeTime && phoneRules}" :disabled="!phoneRules">
            {{ codeTime ? `(${codeTime}s)后重新获取验证码` : "点击获取验证码" }}
          </button>
        </div>
        <div>
          <input type="text" placeholder="验证码" />
        </div>
      </div>
      <div class="account" v-else>
        <div>
          <input type="text" placeholder="账号" v-model="params.username" />
        </div>
        <div>
          <input :type="pwdShow?'password':'text'" placeholder="密码" v-model="params.password" />
             <div class="toggle" @click="pwdShow=!pwdShow">
              密码显示与隐藏
              <div class="things" :class="{thingsOn:pwdShow}"></div>
            </div>
            
        </div>
      </div>
    </div>

    <div class="tips">温馨提示:</div>
    <div class="btn">
      <button @click="loginHandle">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      isActive: true,
      codeTime: 0,
      phoneCode:'',
      phoneRules:false,
      pwdShow:true,
      params: {
        username: "0233200",
        password: "0233200",
      },
    };
  },
  methods: {
    loginHandle() {
      this.$api.login(this.params).then((res) => {
        const { data } = res;
        if (data.status === 200) {
          this.$store.commit("saveInfo", data);
          this.$router.push("/");
        } else {
          alert("登录失败!账号或密码错误");
        }
      });
    },
    sendCode() {
      if (this.codeTime == 0) {
        this.codeTime = 5;
        const intervalId = setInterval(() => {
          this.codeTime--;

          if (this.codeTime <= 0) {
            clearInterval(intervalId);
          }
        }, 1000);
      }
    },
  },
  watch:{
      phoneCode(newdata){
          if(/^1(3[0-9]|5[189]|8[6789])[0-9]{8}$/.test(newdata)){
              this.phoneRules = true
              console.log(111);
          }else{
              this.phoneRules = false
          }
         
      }
  }
};
</script>

<style lang="less" scoped>
.login {
  .icon {
    background-color: var(--themeColor);

    width: 100%;
    float: left;
    box-sizing: border-box;
    i {
      padding: 0 20px;
      font-size: 30px;
    }
  }
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: #f1f1f1;

  div:not(:nth-child(1)) {
    padding: 20px 0;
  }
  .title {
    width: 100%;
    text-align: center;
    font-size: 28px;
  }
  .loginMethod {
    display: flex;
    justify-content: space-around;
    width: 80%;
    .inputFrom {
      width: 375px;
      justify-content: space-around;
      display: flex;
     

   
    }
  }
  .btn {
    width: 100%;
    text-align: center;
    button {
      background-color: var(--themeColor);

      width: 80%;
    }
  }
  .onAcitve {
    color: var(--themeColor);
    border-bottom: 2px solid var(--themeColor);
  }
}
 .btnOn {
        color: green;
        background-color: rgb(168, 243, 227);
      }
      
      .things{

          width: 30px;
          height: 30px;
          background-color: rgb(230, 55, 55);
          transition: all 1s;
          
      }
      .thingsOn{
          transform: translatex(100px);

      }

</style>